<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CeMberuS - Styleguide</title>
        
        <!-- begin stylsheets -->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" media="all">
        <link type="text/css" rel="stylesheet" href="media/css/default.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/cemberus.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/layout.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/text.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/button.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/lists.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/forms.css" media="all" />
        <link type="text/css" rel="stylesheet" href="media/css/boxes.css" media="all" />
        
        <!-- syntaxhighlighting -->
        <script type="text/javascript" src="media/js/shCore.js"></script>
        <script type="text/javascript" src="media/js/shBrushXml.js"></script>
        <link type="text/css" rel="stylesheet" href="media/css/shCoreDefault.css"/>
        <link type="text/css" rel="stylesheet" href="media/css/shThemeEclipse.css"/>
        <script type="text/javascript">SyntaxHighlighter.all();</script>
        
    </head>
    
    <body class="start">
        <div id="page">
            <div id="header">
                <div id="logo">
                    <h1><a href="./" title="CeMberuS Startseite Styleguide">CeMberuS - Styleguide</a></h1>
                </div>
                <div id="menu">
                    <ul id="navigation" class="js-nav clearfix">
                        <li><a href="./" title="CeMberuS Startseite" class="first">Startseite</a></li>
                        <li><a href="text.html" title="CeMberuS Textauszeichnung">Textauszeichnung</a></li>
                        <li><a href="button.html" title="CeMberuS Button Styles" class="active">Buttons</a></li>
                        <li><a href="boxes.html" title="CeMberuS Boxes Styles" class="last">Boxes</a></li>
                    </ul>
                    <div id="search">
                        <form id="searchform" method="get" action="">
                            <fieldset>
                                <legend>CeMberuS Suchformular</legend>
                                <input id="searchinput" type="text" value="suchen..." />
                                <input id="searchbutton" type="button" value="" />
                                <div class="clear"> </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="clear"> </div>
                </div>
            </div>
            <div id="content-header"> </div>
            <div id="content">
                <div id="content-area">
                    <div id="breadcrumbs">
                        <p><a href="./" title="CemBeruS Styleguide">CeMberuS</a><span class="sep"></span>Textauszeichnung</p>
                    </div>
                    <div class="entry">
                        <h2>1. Allgemeine Informationen</h2>
                        <p>Dieses Dokument beschreibt den Styleguide für das CMS <strong>CeMberuS</strong>. Diese Unterseite richtet sich der Buttons, die zum Einsatz kommen könnten zu.</p>
                        <h2>2. Standard Buttons:</h2>
                        <p>Der Aufruf erfolgt durch einfachen HTML Code:</p>
                        <pre class="brush: html">
                        &lt;a href="button" href="#" title="Mein Button"&gt;
                            &lt;span&gt;klick mich&lt;/span&gt;
                        &lt;/a&gt;
                        </pre>
                        <a class="button" href="#" title="Button Normal">
                            <span>Button #1</span>
                        </a>
                        <a class="button blue" href="#" title="Button Blue">
                            <span>Button #2</span>
                        </a>
                        <a class="button black" href="#" title="Button Black">
                            <span>Button #3</span>
                        </a>
                        <a class="button red" href="#" title="Button Red">
                            <span>Button #4</span>
                        </a>
                        <a class="button green" href="#" title="Button Green">
                            <span>Button #5</span>
                        </a>
                        <a class="button orange" href="#" title="Button Orange">
                            <span>Button #6</span>
                        </a>
                        <div class="clear"> </div>
                        <h2>3. Buttons mit Icons:</h2>
                        <p>Buttons die links ein Icon haben sollen, haben etwas mehr Markup:</p>
                        <pre class="brush: html">
                        &lt;a href="icon-button" href="#" title="Mein Button mit Icon"&gt;
                            &lt;span class="icon"&gt;
                                &lt;span&gt;klick mich&lt;/span&gt;
                            &lt;/span&gt;
                        &lt;/a&gt;
                        </pre>
                        <a class="icon-button" href="#" title="Icon Button Question">
                            <span class="icon">
                                <span>Icon Button #1</span>
                            </span>
                        </a>
                        <a class="icon-button download" href="#" title="Icon Button Download">
                            <span class="icon">
                                <span>Icon Button #2</span>
                            </span>
                        </a>
                        <a class="icon-button search" href="#" title="Icon Button Search">
                            <span class="icon">
                                <span>Icon Button #3</span>
                            </span>
                        </a>
                        <a class="icon-button refresh" href="#" title="Icon Button Refresh">
                            <span class="icon">
                                <span>Icon Button #4</span>
                            </span>
                        </a>
                        <a class="icon-button warning" href="#" title="Icon Button Warning">
                            <span class="icon">
                                <span>Icon Button #5</span>
                            </span>
                        </a>
                        <a class="icon-button edit" href="#" title="Icon Button Edit">
                            <span class="icon">
                                <span>Icon Button #6</span>
                            </span>
                        </a>
                        <a class="icon-button notice" href="#" title="Icon Button Notice">
                            <span class="icon">
                                <span>Icon Button #7</span>
                            </span>
                        </a>
                        <div class="clear"> </div>
                    </div>
                </div>
            </div>
            <div id="content-footer"> </div>
        </div>
    </body>
    
</html>

